<script>
import { useVModel } from '@vueuse/core'
import { provide } from 'vue'
export default {
  name: 'XtxTabs',
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  },
  setup(props, { emit }) {
    const activeName = useVModel(props, 'modelValue', emit)
    // 点击修改选项卡触发的函数
    const tabClick = (name, index) => {
      activeName.value = name
      // 提供一个tab-click自定义事件
      emit('tab-click', { name, index })
    }
    // 传给后代组件谁激活
    provide('activeName', activeName)

    return { activeName, tabClick }
  },
  render() {
    // 获取插槽
    const panals = this.$slots.default()
    // 动态的panals
    const dynamicPanal = []
    panals.forEach((item, i) => {
      // 没有名字就是v-for创建的
      if (item.type.name === 'XtxTabsPanal') {
        dynamicPanal.push(item)
      } else {
        item.children.forEach((i) => {
          dynamicPanal.push(i)
        })
      }
    })
    // 点击修改选项卡
    // // 点击修改选项卡触发的函数
    // const tabClick = (name) => {
    //   this.activeName = name
    // }
    // 需要在这是进行组织
    // 1.tabs组件大容器
    // 2.选项卡的导航菜单结构
    // 3.内容容器
    // 选项卡菜单的包裹容器
    const nav = (
      <nav>
        {dynamicPanal.map((item, i) => {
          return (
            <a
              href="javascript:;"
              onClick={() => this.tabClick(item.props.name, i)}
              class={{
                active: item.props.name === this.modelValue
              }}
            >
              {item.props && item.props.label}
            </a>
          )
        })}
      </nav>
    )
    return <div class="xtx-tabs">{[nav, dynamicPanal]}</div>
  }
}
</script>
<style scoped lang="less">
.xtx-tabs {
  background: #fff;
  height: 100%;
  > nav {
    height: 60px;
    line-height: 60px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;
    > a {
      width: 110px;
      border-right: 1px solid #f5f5f5;
      text-align: center;
      font-size: 16px;
      &.active {
        border-top: 2px solid @xtxColor;
        height: 60px;
        background: #fff;
        line-height: 56px;
      }
    }
  }
}
</style>
